import React, { useEffect, useState } from 'react'
import { Header, AlertTip } from 'src/components'
import './index.scss'

const Download = () => {
    const [system, setSystem] = useState();
    const [showAlert, setShowAlert] = useState(false)
    const [alertText, setAlertText] = useState()

    useEffect(() => {
        //判断系统
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
            setSystem('Android')
        } else if (isIOS) {
            setSystem('IOS')
        } else {
            setSystem('pc')
        }
    }, [])

    const download = () => {
        //如果是ios用户则提示，否则直接下载
        if (system === 'IOS') {
            setAlertText('IOS用户请前往AppStore下载')
            setShowAlert(true)
        } else {
            try {
                let elemIF = document.createElement("iframe");
                elemIF.src = 'http://cangdu.org/files/elm.apk';
                elemIF.style.display = "none";
                document.body.appendChild(elemIF);
            } catch (e) {
                setAlertText('下载失败')
                setShowAlert(true)
            }
        }
    }
    const closeTip = () => {
        setShowAlert(false)
    }
    return <div className="page_download">
        <Header title="下载" goBack />
        <section className="dowload_container">
            <img src="/images/elmlogo.jpeg" className="logo_img" alt="" />
            <p>下载饿了么APP</p>
            <div className="determine" onClick={download}>下载</div>
        </section>
        {
            showAlert && <AlertTip onClose={closeTip} alertText={alertText}></AlertTip>
        }
    </div>
}

export default Download